 <!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:08:21
-->

<template>
  <div class="home">
    <!-- 轮播图开始 -->
    <div class="carousel">
    <el-carousel height="300px">
      <el-carousel-item v-for="iteam in carousels" :key="iteam.id">
        <img width="100%" :src="iteam.url" alt="">
      </el-carousel-item>
    </el-carousel>
    </div>
    <!-- 轮播图结束 -->
    <!-- 研学项目开始 -->
    <div class="projects">
      <div class="wrapper">
        <div class="title">精选游学项目</div>
        <div @click="projectHandler(iteam.id)" class="project" v-for="iteam in projects" :key="iteam.id">
          <div class="left">
            <img width="100%" :src="iteam.figure" alt="">
          </div>
          <div class="right">
            <div class="name">{{iteam.name}}</div>
            <div class="time">{{iteam.beginTime | fmtDate}}~{{iteam.endTime | fmtDate}}</div>
            <div class="desc">{{iteam.introduce}}</div>
          </div>
      </div>
      </div>
    </div>
    <!-- 研学项目结束 -->
    <!-- 学生风采开始 -->
    <div class="articles">
      <div class="wrapper">
        <div class="title">学生风采</div>
        <div class="art">
          <div @click="articleHandler(iteam.id)" class="left" v-for="iteam in Cart" :key="iteam.id">
            <div class="pic">
              <img width="100%" :src="iteam.cover" alt="">
            </div>
            <div class="text">
              <div class="content">{{iteam.title}}</div>
              <div class="time">{{iteam.publishTime | fmtDate}}</div>
              <div class="author">{{iteam.baseUser.realname}}</div>
              <div class="star"><i class="iconfont">&#xe60c;</i>{{iteam.thumpUp}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 学生风采结束 -->
    <!-- 常见问题开始 -->
    <div class="questions">
      <div class="wrapper">
        <div class="question">
          <div class="title">常见问题</div>
          <div class="title_sub">孩子年龄太小去暑期游学合适吗？夏令营的时候怎么保障安全？</div>
          <p> 其实年龄小的时候多出去是非常有利于孩子的身心的，能够在成长阶段多看看外面的世界、多吸收不同的文化、学习不同的思维方式。孩子的适应性和应变能力有的时候比大人想象的要强很多，但是在家里由于长辈的呵护而得不到锻炼，出去和别的小朋友一起学习独立，学习怎么成为集体的一分子，学习平等待人，这对少儿和青少年的长成都很有帮助。大多数家长担心的会是小孩子出去的安全问题，所以建议在选择夏令营团的时候务必仔细。英孚在这方面有50多年的经验，出发会有国内领队带团；而国外夏令营的学校都是英孚自己的学校，海外的领队也是学校精心挑选的人，全程都是英孚的工作人员负责。家长甚至可以通过MyEF系统登陆看到整个夏令营团队的课程、活动规划、寄宿家庭信息等，全程追踪，而领队也会随时和家长保持联系。 </p>
          <img src="http://121.199.29.84/xxtx-ui/static/img/question1.e525c7f5.jpg" alt="">
        </div>
        <div class="question">
          <div class="title_sub">参加夏令营到底有什么好处？</div>
          <p> 国外流行的游学夏令营一般都是有一个主题的，宗旨是让一群年轻的小朋友聚在一起，在导师的带领下参加围绕该主题的活动，促进友谊的同时，可以和有共同兴趣爱好的人一起学习、交流分享。所以夏令营是让孩子们拓展视野的好时机，比如你的小孩从小就有表演天分，可是作为家长却不知道应该怎么做让她/他进一步的发挥，那参加表演艺术主题的夏令营就可以给予一定的指导和空间，甚至会安排小舞台让她/他进行表演，而往往因这样的机缘巧合也会更加容易收获真挚的友情。EF英孚夏令营除了有学习语言为主的夏令营活动，也有各式主题类型的国际夏令营，比如足球夏令营、探险夏令营、冲浪夏令营、马术夏令营、表演明星课程、时尚和艺术工作室等。 </p>
          <img src="http://121.199.29.84/xxtx-ui/static/img/question1.e525c7f5.jpg" alt="">
        </div>
      </div>
    </div>
    <!-- 常见问题结束 -->
  </div>
</template>
<script>
//引入axios
import {get} from "../utils/request"
export default{
  data(){
    return{
      carousels:[],
      projects:[],
      Cart:[],
    }
  },
  methods:{
    findAllCarousel(){
      get("/index/carousel/findAll").then(res=>{
        if(res.status==200){
          this.carousels=res.data
        }else{
          this.$message({
            type: "error",
            message: res.message
          })
        }
      })
    },
    project(){
      get("/index/project/pageQuery?page=1&pageSize=20").then(res=>{
        if(res.status==200){
          this.projects=res.data.list
        }else{
          this.$message({
            type: "error",
            message: res.message
          })
        }
      })
    },
    findCategoryArticles(){
      get("/index/article/pageQuery?page=1&pageSize=8&status=审核通过").then(res=>{
        if(res.status==200){
          this.Cart=res.data.list
        }else{
          this.$message({
            type: "error",
            message: res.message
          })
        }
      })
    },
    projectHandler(id){
      this.$router.push({path:'/project',query:{id:id}})
    },
    articleHandler(id){
      this.$router.push({path:'/article',query:{id:id}})
    }
  },
  created(){
    this.findAllCarousel()
    this.project()
    this.findCategoryArticles()
  }
}
</script>
<style scoped lang="scss">
          @font-face {
  font-family: 'iconfont';  /* Project id 2721189 */
  src: url('https://at.alicdn.com/t/font_2721189_my8fjyu2y7.woff2?t=1631880159837') format('woff2'),
       url('https://at.alicdn.com/t/font_2721189_my8fjyu2y7.woff?t=1631880159837') format('woff'),
       url('https://at.alicdn.com/t/font_2721189_my8fjyu2y7.ttf?t=1631880159837') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
.projects{
.wrapper{
  .title{
    font-size:20px;
    line-height:4em;
    border-bottom: 1px solid #f4f4f4;
  }
  .project{
    display: flex;
    padding:1em 0;
    border-bottom: 1px solid #f4f4f4;
    .left{
      width:300px;
      height:200px;
      overflow: hidden;
      border-radius: 5px;
    }
    .right{
      flex:1;
      padding: 0 2em ;
      .name{
        line-height:2em;
        font-weight: 600;
        font-size:15px;
      }
      .time{
        line-height:2em;
        font-size:15px;
      }
      .desc{
        line-height:2em;
      }
    }
  }
}
}
.articles{
  .wrapper{
    .title{
      font-size:20px;
      line-height:4em;
    }

    .art{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .left{
        flex-basis: 28%;
        cursor: pointer;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        .pic{
          width:100%;
          height:160px;
          overflow: hidden;
          border-radius: 5px;
        }
        .text{
          padding: 1em;
          line-height: 2em;
        }
      }
      .left:hover{
          background-color: #f4f4f4;
          }
    }
    
  }
}
.questions{
  p{
    text-indent: 2em;
    line-height: 2em;
  }
  .title{
    font-weight: 700;
    font-size: 20px;
    line-height: 2em;
    color: #333;
  }
  .title_sub{
    font-weight: 700;
    font-size: 16px;
    line-height: 2em;
    color: #333;
  }
}
</style>